<script setup>
import {useSys} from '@/hooks/useSys'
import {computed, ref, watch} from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  list: {
    type: Array,
    default: () => []
  },
  theme: {
    type: String,
    default: 'default', // default-默认，green-绿色，grey-灰色
  }
})

const emit = defineEmits(['update:modelValue'])

const index = ref(props.modelValue)

watch(props, (newVal) => {
  if (newVal.modelValue !== index.value) {
    index.value = newVal.modelValue
  }
})

const trigger = (idx) => {
  index.value = idx
  emit('update:modelValue', idx)
}

const clazzs = computed(() => `tabs-item-${props.theme}-selected`)

</script>

<template>
  <view class="tabs-container">
    <view class="tabs-item inline-block-middle"
          v-for="(item,idx) of props.list"
          :key="idx"
          @click="trigger(idx)"
          :class="{ [clazzs]: idx === index }"
    >{{ item }}</view>
  </view>
</template>

<style scoped lang="scss">
.tabs-container {
  display: inline-block;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 8rpx;
  height: 76rpx;
  border-radius: 120rpx;
  background-color: $kaoyan-color-13;
}
.tabs-item {
  border-radius: 48rpx;
  display: inline-block;
  padding: 8rpx 32rpx;
  text-align: center;
  color: $kaoyan-color-9;
  font-size: 32rpx;
  font-style: normal;
  font-weight: 600;
  line-height: 44rpx;
}
.tabs-item-default-selected {
  color: $kaoyan-color-9;
  background-color: $kaoyan-color-14;
}
.tabs-item-green-selected {
  color: $kaoyan-color-14;
  background-color: $kaoyan-color-7;
}
.tabs-item-grey-selected {
  color: $kaoyan-color-14;
  background-color: $kaoyan-color-10;
}
</style>
